<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :size="size" :close-on-click-modal="false"
    :before-close="handleClose">
    <el-form :model="form" ref="form" :rules="rules" :size="size" label-width="140px">
      <el-form-item label="粪污类型" prop="sewageHandleType">
        <!-- <el-input v-model.trim="form.sewageHandleType" placeholder="请输入姓名" maxlength="50" show-word-limit></el-input> -->
        <el-select v-model="form.sewageHandleType" placeholder="请选择粪污类型" style="width:300px">
          <el-option v-for="item in sewageHandleTypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="粪污产生量(kg)" prop="wasteProductionAmount">
        <el-input v-model.trim="form.wasteProductionAmount" placeholder="请输入粪污产生量" maxlength="50" show-word-limit
          style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="资源化利用方法" prop="recycLingUseMethod">
        <!-- <el-input v-model.trim="form.sewageHandleType" placeholder="请输入姓名" maxlength="50" show-word-limit></el-input> -->
        <el-select v-model="form.recycLingUseMethod" placeholder="请选择资源化利用方法" style="width:300px">
          <el-option v-for="item in recycLingUseMethodeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="还田重量(kg)" prop="returningFarmlandWeight">
        <el-input v-model.trim="form.returningFarmlandWeight" placeholder="请输入还田重量" maxlength="18" show-word-limit
          style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="卧床重量(kg)" prop="bedRestWeight">
        <el-input v-model.trim="form.bedRestWeight" placeholder="请输入卧床重量" maxlength="18" show-word-limit
          style="width:300px"></el-input>
      </el-form-item>
      <!-- <el-form-item label="企业名称" prop="enterpriseName">
            <el-input v-model.trim="form.enterpriseName" placeholder="请输入企业名称" maxlength="50" style="width:300px"></el-input>
        </el-form-item> -->
      <el-form-item label="备注" prop="sewageHandleRemark">
        <el-input type="textarea" maxlength="255" style="width:300px" :autosize="{ minRows: 2, maxRows: 12}"
          show-word-limit placeholder="请输入备注" v-model="form.sewageHandleRemark">
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="处理设施图片" prop="sewageHandlePhoto">
        <Upload @ok="handleSuccess" @remove="handleRemove" name="sewageHandlePhoto" ref="sewageHandlePhotoUpload"
          :fileLIST.sync="sewageHandlePhotoList" />
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :size="size" @click="dialogVisible = false">取消</el-button>
      <el-button :size="size" type="primary" @click="submit" v-if="updatedFlag" :disabled.sync="saveLoading"
        :loading.sync="saveLoading">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import { getSewageHandleInfo, getSystemFile, getSewageHandleAdd, getSewageHandleEdit } from '@/api/dung'
// import Upload from '@/views/veterinaryManger/upload'
export default {
  components: {
    Upload
  },
  data() {
    return {
      dialogVisible: false, // 窗口是否显示
      title: '', // 窗口标题
      size: 'small', // 窗口大小
      fileList: [], // 附件数据
      saveLoading: false,
      updatedFlag: false, // 记录数据是否更新
      sewageHandlePhotoList: [],
      form: {
        sewageHandleType: null, // 粪污类型
        wasteProductionAmount: null, // 粪污重量
        returningFarmlandWeight: null, // 还田重量
        bedRestWeight: null, // 卧床重量
        sewageHandleRemark: '', // 备注
        recycLingUseMethod: null,
        sewageHandlePhoto: [], // 处理图片
      }, // 表单字段
      recycLingUseMethodeList: [
        {
          value: '干湿分离',
          label: '干湿分离'
        },
        {
          value: '堆肥',
          label: '堆肥'
        },
        {
          value: '氧化塘',
          label: '氧化塘'
        },
        {
          value: '原位发酵',
          label: '原位发酵'
        }
      ],
      sewageHandleTypeList: [
        {
          value: '固体',
          label: '固体'
        },
        {
          value: '液体',
          label: '液体'
        }
      ],
      rules: {
        sewageHandleType: [
          { required: true, message: '请选择粪污类型', trigger: ['blur', 'change'] }
        ],
        wasteProductionAmount: [
          { required: true, message: '请输入粪污产生量', trigger: ['blur', 'change'] },
          { pattern: /^-?\d{1,12}([.]\d{1,2})?$/, message: '请输入整数最多12位,小数最多2位的数字', trigger: ['blur', 'change'] }
        ],
        recycLingUseMethod: [
          { required: true, message: '请选择资源化利用方法', trigger: ['blur', 'change'] }
        ],
        returningFarmlandWeight: [
          { pattern: /^-?\d{1,12}([.]\d{1,2})?$/, message: '请输入整数最多12位,小数最多2位的数字', trigger: ['blur', 'change'] }
        ],
        bedRestWeight: [
          { pattern: /^-?\d{1,12}([.]\d{1,2})?$/, message: '请输入整数最多12位,小数最多2位的数字', trigger: ['blur', 'change'] }
        ]
      }, // 表单校验规则
    }
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      let _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          _this.saveLoading = true;
          // console.log('_this.form', _this.form)
          let obj = Object.assign({}, _this.form)
          obj.sewageHandlePhoto = _this.form.sewageHandlePhoto && _this.form.sewageHandlePhoto.join(',')
          if (obj.sewageHandleId) {
            // 修改
            getSewageHandleEdit(obj).then(function (res) {
              if (res.code === 200) {
                _this.dialogVisible = false;
                _this.$message({ message: '修改成功', type: 'success', duration: 1000 })
                _this.form.sewageHandlePhoto = []
                _this.sewageHandlePhotoList = []
                _this.$emit('ok')
              } else {
                _this.$message({ message: res.msg, type: 'error', duration: 1000 })
                _this.saveLoading = false;
              }
              _this.saveLoading = false;
            })

          } else {
            // 新增
            getSewageHandleAdd(obj).then(function (res) {
              if (res.code === 200) {
                _this.dialogVisible = false;
                _this.$message({ message: '新增成功', type: 'success', duration: 1000 })
                _this.form.sewageHandlePhoto = []
                _this.sewageHandlePhotoList = []
                _this.$emit('ok')
              } else {
                _this.$message({ message: res.msg, type: 'error', duration: 1000 })
                _this.saveLoading = false;
              }
              _this.saveLoading = false;
            })
          }

        }
      })
    },
    /**
     * 记录数据是否更新
     */
    updataUp() {
      this.updatedFlag = true
    },
    /**
     * 窗口关闭
     */
    handleClose() {
      this.dialogVisible = false
      this.form.sewageHandlePhoto = []
      this.sewageHandlePhotoList = []
    },
    /**
     * 表单初始化
     */
    init(item) {
      this.dialogVisible = true
      this.updatedFlag = true
      this.saveLoading = false;
      let _this = this
      this.sewageHandlePhotoList = []
      // console.log('传过来的', item)
      if (item && Object.keys(item).length === 0) {
        // 新增
        this.title = '新增粪污资源利用'
        this.form = {
          sewageHandleType: null, // 粪污类型
          wasteProductionAmount: null, // 粪污重量
          returningFarmlandWeight: null, // 还田重量
          bedRestWeight: null,
          enterpriseName: null,
          recycLingUseMethod: null,
          sewageHandleRemark: '', // 备注
          sewageHandlePhoto: [], // 处理图片
        }
        this.$nextTick(() => {
          _this.$refs['form'].resetFields()
        })
      } else {
        // 修改
        this.title = '修改粪污资源利用'
        this.getDetails(item, function () {
          _this.getFile(item.sewageHandleId)
        })
      }
    },
    /**
     * 获取详情接口
     */
    getDetails(item, callback) {
      let _this = this
      getSewageHandleInfo(item.sewageHandleId).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data || {}
        } else {
          _this.msgError(res.msg)
        }
        callback && callback()
      })
    },
    /**
     * 获取附件接口
     */
    getFile(selectId) {
      let _this = this;
      let obj = {
        selectId: selectId,
        pageNum: 1,
        pageSize: 999999,
        businessName: 'FWLY'
      }
      getSystemFile(obj).then(function (res) {
        //  // console.log('获取附件', res)
        if (res.code === 200) {
          let list = res.data.list || []
          let a = []
          list.forEach(function (x, i) {
            x.name = x.fileName;
            x.url = process.env.VUE_APP_BASE_API + '/file/file/downloadFile?fileId=' + x.fileId
            x.fileId = x.fileId
            a.push(x.fileId)
          })
          _this.form.sewageHandlePhoto = a
          _this.sewageHandlePhotoList = list
        }
      });
    },
    /**
     * 图片上传成功
     */
    handleSuccess(response, name) {
      this.form[name].push(response.data);
      this.$refs['form'].validateField(name, valid => {
        if (valid) {
          // 表单验证通过
        }
      })
    },
    //   附件删除
    handleRemove(fileList, name) {
      this.form[name] = fileList;
    }
  }
}
</script>